<template>
	<view class="container">
		<view class="header-bg">
			<image src="https://img.tennoir.ltd/static/new/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83%E8%83%8C%E6%99%AF.png"
				class="newheader-bg" />
			<view class="user-info">
				<view class="left-column">
					<!-- Avatar Image with Prefix -->
					<image class="avatar" :src="$xyfun.image(user.info.avatar)"></image>
					<!--					<image class="avatar" :src="'/static/new/位图@2x(3).png'"></image>-->
					<!-- <view class="info" v-if="user.isLogin">
						<text class="nickname">{{ user.info.nickname }}</text>
						<text class="id">ID: {{ user.info.id }}</text>
					</view> -->
					<view class="new-info" v-if="user.isLogin">
						<view style="display: flex;align-items: center;">
							<text class="new-nickname">{{ user.info.nickname }}</text>
							<text class="new-id">ID: {{ user.info.id }}</text>
						</view>
						<view>
							<text class="new-label">
								当前场馆：{{ storeInfo.name }}
							</text>
						</view>
						<view class="new-switch-text-wrap" @tap="$xyfun.to('/pages/store/select')">
							<image src="https://img.tennoir.ltd/static/new/%E5%88%87%E6%8D%A2%E5%BA%97%E9%93%BA.png"
								class="new-qiehuan" />
							<text class="new-switch-text">换店</text>
						</view>
					</view>
					<view class="info" v-else @tap="$xyfun.toLogin()">
						<text class="nickname">请登录</text>
					</view>
				</view>
				<!-- <view class="right-column">
					<view class="venue-left">
						<view class="venue-row">
							<view class="switch-wrapper">
								<text class="label">当前场馆：</text>
								<text class="switch-text" @tap="$xyfun.to('/pages/store/select')">切换</text>
								<image :src="$xyfun.image('/static/user-arrow-right.png')" class="arrow-icon" />
							</view>
						</view>
						<text class="venue-name">{{ storeInfo.name }}</text>
					</view>
				</view> -->
			</view>

			<view class="new-stats">
				<image
					src="https://img.tennoir.ltd/static/new/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83%E4%BB%B7%E4%BD%99%E9%A2%9D%E8%83%8C%E6%99%AF.png"
					class="new-stats-bgimg" />
				<view class="stat-item">
					<text class="stat-number">{{ user.isLogin && user.info.score || 0 }}</text>
					<text class="stat-label">总分</text>
				</view>
				<image
					src="https://img.tennoir.ltd/static/new/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83%E4%BB%B7%E6%A0%BC%E5%88%86%E5%89%B2%E7%BA%BF.png"
					class="new-divider-tools" />
				<view class="stat-item" @click="navigateTobalance">
					<text class="stat-number">{{ user.isLogin && balance || 0.00 }}</text>
					<text class="stat-label">余额</text>
				</view>
				<image
					src="https://img.tennoir.ltd/static/new/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83%E4%BB%B7%E6%A0%BC%E5%88%86%E5%89%B2%E7%BA%BF.png"
					class="new-divider-tools" />
				<view class="stat-item" @click="navigateToCoupon">
					<text class="stat-number">{{ user.isLogin ? couponNum : 0 }}</text>
					<text class="stat-label">卡券</text>
				</view>
			</view>

			<!-- <view class="stats">
				<view class="stat-item">
					<text class="stat-number">{{ user.isLogin && user.info.score || 0 }}</text>
					<text class="stat-label">总分</text>
				</view>
				<view class="stat-item" @click="navigateTobalance">
					<text class="stat-number">{{ user.isLogin && balance || 0.00 }}</text>
					<text class="stat-label">余额</text>
				</view>
				<view class="stat-item" @click="navigateToCoupon">
					<text class="stat-number">{{ user.isLogin ? couponNum : 0 }}</text>
					<text class="stat-label">卡券</text>
				</view>
			</view> -->
		</view>

		<!-- 我的订单 -->
		<view class="xy-order m-30 br-20 bc-w">
			<view class="xy-title flex">
				<view class="tb">我的订单</view>
				<view @click="navigateTo('/pages/user/order/list?status=all', 0)">
					<text class="new-alldingdan">全部订单</text>
					<image
						src="https://img.tennoir.ltd/static/new/%E5%85%A8%E9%83%A8%E8%AE%A2%E5%8D%95%E8%BF%94%E5%9B%9E.png"
						class="new-backimg" />
				</view>
			</view>

			<view class="order-section">
				<view v-for="(order, index) in orders" :key="index" @click="navigateTo(order.route, index)"
					class="order-item">
					<!-- Order Icons with Prefix -->
					<!-- <image :src="$xyfun.image(order.icon)" class="order-icon"></image> -->
					<image :src="order.icon"></image>
					<text class="order-name">{{ order.name }}</text>
				</view>
			</view>
		</view>

		<!-- 功能服务 -->
		<view class="xy-service m-30 br-20 bc-w">
			<view class="xy-title flex">
				<view class="tb">功能服务</view>
			</view>
			<view class="xy-menu tc m-t-40 col-4">
				<view class="list flex">
					<view v-for="(service, index) in services" :key="index" class="item m-b-40"
						v-if="service.name !== '门店管理' || (user.info.store_id > 0)">
						<!-- 只显示 store_id 大于 0 的菜单项 -->

						<view v-if="service.name === '联系客服'" @click="handleContactClick">
							<image src="https://img.tennoir.ltd/static/new/%E8%81%94%E7%B3%BB%E5%AE%A2%E6%9C%8D.png"
								class="service-icon" />
							<view class="name m-t-15 lh-30 ts-30">
								<button open-type="contact" class="contact-button">联系客服</button>
							</view>
						</view>
						<view v-else @click="navigateTo(service.route)">
							<!-- <image :src="$xyfun.image(service.icon)" class="service-icon"></image> -->
							<image :src="service.icon" />
							<view class="name m-t-15 lh-30 ts-30">{{ service.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				css: {},
				storeInfo: {},
				couponNum: 0,
				orders: [{
						name: '全部订单',
						// icon: '/static/new/order-1.png',
						icon: 'https://img.tennoir.ltd/static/new/%E5%85%A8%E9%83%A8%E8%AE%A2%E5%8D%95.png',
						route: '/pages/user/order/list?status=all'
					},
					{
						// name: '待付款',
						// icon: '/static/order-2.png',
						name: '待发货',
						icon: 'https://img.tennoir.ltd/static/new/%E5%BE%85%E5%8F%91%E8%B4%A7.png',
						route: '/pages/user/order/list?status=0'
					},
					{
						// name: '已付款',
						// icon: '/static/order-3.png',
						name: '待收货',
						icon: 'https://img.tennoir.ltd/static/new/%E5%BE%85%E6%94%B6%E8%B4%A7.png',
						route: '/pages/user/order/list?status=1'
					},
					{
						name: '已退订',
						// icon: '/static/order-4.png',
						icon: 'https://img.tennoir.ltd/static/new/%E5%B7%B2%E9%80%80%E8%AE%A2.png',
						route: '/pages/user/order/list?status=-3'
					}
				],
				services: [{
						name: '我的钱包',
						// icon: '/static/server-1.png',
						icon: 'https://img.tennoir.ltd/static/new/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85.png',
						route: '/pages/user/balance/detail'
					},
					{
						name: '领取卡券',
						// icon: '/static/server-2.png',
						icon: 'https://img.tennoir.ltd/static/new/%E9%A2%86%E5%8F%96%E5%8D%A1%E5%88%B8.png',
						route: '/pages/coupon/list'
					},
					{
						name: '充值中心',
						// icon: '/static/server-3.png',
						icon: 'https://img.tennoir.ltd/static/new/%E5%85%85%E5%80%BC%E4%B8%AD%E5%BF%83.png',
						route: '/pages/user/balance/recharge'
					},
					{
						name: '我的包场',
						// icon: '/static/server-4.png',
						icon: 'https://img.tennoir.ltd/static/new/%E6%88%91%E7%9A%84%E5%8C%85%E5%9C%BA.png',
						route: '/pages/user/package'
					},
					{
						name: '设置',
						// icon: '/static/server-6.png',
						icon: 'https://img.tennoir.ltd/static/new/%E8%AE%BE%E7%BD%AE.png',
						route: '/pages/user/info'
					},
					{
						name: '门店管理',
						// icon: '/static/server-10.png',
						icon: '/static/shop.png',
						route: '/pages/store/store'
					},
					{
						name: '团购核销',
						icon: '/static/hexiao.png',
						route: '/pages/user/group'
					},
					{
						name: '私教订单',
						// icon: '/static/server-10.png',
						icon: 'https://img.tennoir.ltd/static/new/%E5%85%A8%E9%83%A8%E8%AE%A2%E5%8D%95.png',
						route: '/pages/course/order'
					},
					{
						name: '加盟订单',
						// icon: '/static/server-10.png',
						icon: 'https://img.tennoir.ltd/static/new/%E5%8A%A0%E7%9B%9F%E8%AE%A2%E5%8D%95.png',
						route: '/pages/user/franOrder/franOrder'
					},

					{
						name: '联系客服',
						// icon: '/static/server-5.png',
						icon: 'https://img.tennoir.ltd/static/new/%E8%81%94%E7%B3%BB%E5%AE%A2%E6%9C%8D.png',
						route: 'contact'
					}
				],
				balance: ""
			};
		},
		computed: {
			...mapState(['common', 'user'])
		},
		onLoad() {
			this.$xyfun.setNavBg()
			this.css = this.$xyfun.css();
		},
		onShow() {
			this.loadData();
			this.getStoreMoney()
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods: {
			...mapActions('user', {
				'getUserInfo': 'getInfo'
			}),
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/store/detail',
						loadingTip: '加载中...',
						data: {
							id: store_id || 1,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.storeInfo = res;
						}
					});

					//刷新用户信息
					if (this.user.isLogin) {
						this.getUserInfo();
					}
				})
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/user_coupon/listNum',
						data: {
							store_id: store_id,
							status: 0
						},
						success: res => {
							this.couponNum = res;
						}
					});
				})
			},
			// Navigation function to handle page transition
			navigateTo(route, index) {
				uni.navigateTo({
					url: route // Dynamic route passed from the data
				});
			},
			// 处理点击客服图片
			handleContactClick() {
				console.log('客服图片被点击了'); // 确认是否触发事件
				uni.openContact({
					success: () => {
						console.log('成功打开客服');
					},
					fail: (error) => {
						console.log('打开客服失败', error);
					}
				});
			},
			navigateToCoupon() {
				uni.navigateTo({
					url: '/pages/user/coupon/list'
				});
			},
			navigateTobalance() {
				uni.navigateTo({
					url: '/pages/user/balance/detail'
				});
			},
			// 获取店铺余额
			getStoreMoney() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/user_balance/getBalance',
						data: {
							store_id: store_id,
							user_id: this.user.info.id
						},
						success: res => {
							this.balance = res.balance
						}
					});
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.contact-button {
		all: unset;
		/* Reset all default styles */
		display: inline-block;
		font-size: 16px;
		// color: #1E90FF;
		/* Optionally style it as a link */
		cursor: pointer;
		position: relative;
		/* Add relative positioning to prevent layout from breaking */
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		font-style: normal;
	}

	.new-alldingdan {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
	}

	.new-backimg {
		width: 16rpx;
		height: 32rpx;
		margin-left: 2rpx;
	}

	.new-divider-tools {
		width: 2rpx;
		height: 76rpx;
		z-index: 2;
	}

	.new-stats {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 18rpx 68rpx 24rpx;
		position: relative;
		margin: 26rpx 30rpx 0rpx;
	}

	.new-stats-bgimg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
	}

	.new-switch-text-wrap {
		margin-top: 5px;
		width: 45px;
		height: 17px;
		border-radius: 10px;
		border: 1px solid #979797;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.new-switch-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 10px;
		color: #333333;
		line-height: 14px;
		text-align: right;
		font-style: normal;
	}

	.new-label {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #333333;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 5px;
		display: block;
	}

	.new-nickname {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 16px;
		color: #222222;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.new-id {
		// width: 42px;
		padding: 2px 6px;
		// height: 18px;
		background-color: #fff;
		border-radius: 10px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #E94419;
		line-height: 17px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 6px;
	}

	.new-qiehuan {
		width: 13px;
		height: 13px;
	}

	.container {
		// padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.xy-title {
		font-size: 32rpx;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #F5F5F5;
		margin-bottom: 42rpx;
	}

	.user-info {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		position: relative;
		/* To position the background image */
		padding: 20rpx;
		border-radius: 10rpx;
		padding-top: 108rpx;
	}

	.header-bg {
		height: 517rpx;
		// background-image: linear-gradient(to right, #fff1eb 0%, #ace0f9 100%);
		padding-top: 90rpx;
		z-index: 10;
		position: relative;
	}

	.newheader-bg {
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.xy-order {
		position: absolute;
		top: 450rpx;
		width: 630rpx;
		margin-top: 90rpx;
		z-index: 100;
		padding: 14rpx 32rpx 40rpx;
	}

	.xy-service {
		margin-top: 210rpx;
		padding: 16rpx 32rpx;
	}

	.bg-image {
		position: absolute;
		/* Make the image a background */
		top: 0;
		left: 0;
		width: 750rpx;
		/* Cover the entire space */
		height: 517rpx;
		/* Cover the entire space */
		object-fit: cover;
		/* Ensure the image covers the section */
		z-index: -1;
		/* Place it behind the content */
		border-radius: 10rpx;
		/* Match the border radius */
	}

	.left-column {
		// width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.right-column {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 135rpx;
		height: 135rpx;
		border-radius: 50%;
		// margin-right: 5px;
		margin-right: 11px;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 10rpx;
		height: 100rpx;
		// line-height: 100rpx;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
	}

	.id {
		line-height: 45rpx;
		font-size: 28rpx;
		color: #fff;
		// width: 154rpx;
		height: 45rpx;
		background: #F8B551;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.venue-left {
		/* background-color: #fff; */
		/* padding: 10rpx; */
		// border-radius: 10rpx;
		/* margin-top: 10rpx; */
	}

	.venue-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;

		image {
			margin-left: 5rpx;
			width: 12rpx;
			height: 23rpx;
		}
	}

	.label {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.switch-text {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.arrow-icon {
		width: 12rpx;
		height: 23rpx;
	}

	.venue-name {
		width: 218rpx;
		height: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		// font-size: 32rpx;
		color: #000000;
		// line-height: 100rpx;
	}

	.stats {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		// width: 50rpx;
		// height: 26rpx;
		// font-weight: bold;
		// font-size: 32rpx;
		// color: #2B1F1F;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #FB4502;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
		z-index: 2;
	}

	.stat-label {
		// width: 62rpx;
		// height: 30rpx;
		// font-weight: bold;
		// font-size: 32rpx;
		// color: #2B1F1F;
		// margin-top: 19rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
		z-index: 2;
	}

	/* 我的订单样式 */
	.order-section {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 28rpx;
		/* padding: 20rpx; */

		.order-name {
			color: #2B1F1F;
			font-size: 28rpx;
		}
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		/* padding: 10rpx; */
		/* border-bottom: 1px solid #eee; */
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.order-item image {
		// width: 63rpx;
		// height: 63rpx;
		// margin-bottom: 26rpx;
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 10rpx;
	}

	.order-item text {
		// font-size: 28rpx;
		// color: #333;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
	}



	/* 确保每行显示 4 个 */
	.order-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.order-item {
		flex-basis: 22%;
	}

	.xy-menu {
		width: 600rpx;

		.item {
			width: 33.3%;
			text-align: center;

			button {
				background: none;
				padding: 0;
				margin: 0;
			}

			button::after {
				border: none;
			}
		}

		image {
			// width: 50rpx;
			// height: 50rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.xy-menu.col-4 {
		.item {
			width: 25%;
			// margin-top:40rpx;

			image {
				// width: 63rpx;
				// height: 63rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.name {
				// margin-top: 40rpx;
				margin-top: 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				font-style: normal;
			}
		}
	}
</style>